<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>威客任务平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">威客任务平台</a>
            <div class="navbar-nav ms-auto">
                <div sec:authorize="isAuthenticated()">
                    <span class="navbar-text me-3" sec:authentication="name"></span>
                    <a class="nav-link d-inline-block" th:href="@{/profile}">个人资料</a>
                    
                    <!-- 退出表单 -->
                    <form th:action="@{/logout}" method="post" class="d-inline-block">
                        <button type="submit" class="nav-link btn btn-link">退出</button>
                    </form>
                    
                    <!-- 管理员功能链接 -->
                    <div sec:authorize="hasRole('ADMIN')" class="d-inline-block">
                        <a class="nav-link d-inline-block" th:href="@{/admin/users}">用户管理</a>
                        <a class="nav-link d-inline-block" th:href="@{/admin/tasks}">任务管理</a>
                    </div>
                    
                    <!-- 威客功能链接 -->
                    <div sec:authorize="hasRole('FREELANCER')" class="d-inline-block">
                        <a class="nav-link d-inline-block" th:href="@{/freelancer/my-applications}">查看我的申请</a>
                        <!-- 删除任务管理按钮 -->
                    </div>
                    
                    <!-- 雇主功能链接 -->
                    <div sec:authorize="hasRole('EMPLOYER')" class="d-inline-block">
                        <a class="nav-link d-inline-block" th:href="@{/employer/tasks}">任务管理</a>
                        <a class="nav-link d-inline-block" th:href="@{/employer/task-applications}">承接任务管理</a>
                    </div>
                </div>
                
                <div sec:authorize="!isAuthenticated()">
                    <a class="nav-link" th:href="@{/login}">登录</a>
                    <a class="nav-link" th:href="@{/register}">注册</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="jumbotron">
            <h1 class="display-4">欢迎来到威客任务平台</h1>
            <p class="lead">这是一个为自由职业者和雇主提供的高效任务发布与承接平台。</p>
            <hr class="my-4">
            <p>在这里，您可以发布任务、承接任务、管理项目进度并完成交易。</p>
            <div sec:authorize="!isAuthenticated()">
                <a class="btn btn-primary btn-lg" th:href="@{/register}" role="button">立即注册</a>
                <a class="btn btn-outline-primary btn-lg" th:href="@{/login}" role="button">登录</a>
            </div>
        </div>
        
        <!-- 威客功能区域 -->
        <div sec:authorize="hasRole('FREELANCER')" class="mt-4">
            <div class="alert alert-info">
                <h4>威客功能</h4>
                <p>作为威客，您可以浏览任务、申请任务和提交工作成果。</p>
                <a th:href="@{/freelancer/my-applications}" class="btn btn-secondary">查看我的申请</a>
            </div>
            
            <!-- 可申请的任务 -->
            <div class="mt-4">
                <h3>可申请的任务</h3>
                
                <!-- 搜索表单 -->
                <!-- 提供按任务标题和任务状态进行条件查询的功能 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <form th:action="@{/}" method="get" class="row g-3">
                            <div class="col-md-4">
                                <label for="availableTitle" class="form-label">按标题搜索</label>
                                <input type="text" class="form-control" id="availableTitle" name="title" placeholder="输入任务标题" th:value="${title}">
                            </div>
                            <div class="col-md-4">
                                <label for="availableTaskStatus" class="form-label">按状态筛选</label>
                                <select class="form-control" id="availableTaskStatus" name="taskStatus">
                                    <option value="" th:selected="${taskStatus == null or taskStatus == ''}">全部状态</option>
                                    <option value="open" th:selected="${taskStatus == 'open'}">待承接</option>
                                    <option value="in_progress" th:selected="${taskStatus == 'in_progress'}">进行中</option>
                                    <option value="completed" th:selected="${taskStatus == 'completed'}">已完成</option>
                                    <option value="closed" th:selected="${taskStatus == 'closed'}">已关闭</option>
                                </select>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">搜索</button>
                                <a th:href="@{/}" class="btn btn-secondary">重置</a>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div th:if="${availableTasks != null and !availableTasks.empty}">
                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-4" th:each="task : ${availableTasks}">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title" th:text="${task.title}">任务标题</h5>
                                    <p class="card-text" th:text="${#strings.abbreviate(task.description, 100)}">任务描述</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="text-muted">预算:</span>
                                            <span class="fw-bold" th:text="${'¥' + #numbers.formatDecimal(task.budget, 1, 2)}">预算</span>
                                        </div>
                                        <span th:if="${task.taskStatus == 'open'}" class="badge bg-primary">待承接</span>
                                        <span th:if="${task.taskStatus == 'in_progress'}" class="badge bg-warning">进行中</span>
                                        <span th:if="${task.taskStatus == 'completed'}" class="badge bg-success">已完成</span>
                                        <span th:if="${task.taskStatus == 'closed'}" class="badge bg-secondary">已关闭</span>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted">
                                            发布时间: <span th:text="${#temporals.format(task.publishDate, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                                        </small>
                                    </div>
                                </div>
                                <div class="card-footer">
                                    <a th:href="@{/freelancer/tasks/{id}(id=${task.taskId})}" class="btn btn-primary btn-sm">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分页 -->
                    <!-- 分页链接中包含了当前的查询条件，保证在分页时查询条件不会丢失 -->
                    <nav aria-label="可申请任务分页" th:if="${availableTasksTotalPages > 1}">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${availableTasksCurrentPage == 0} ? 'disabled'">
                                <a class="page-link" 
                                   th:href="@{/(page=${availableTasksCurrentPage - 1}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                                   aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            
                            <li class="page-item" th:each="i : ${#numbers.sequence(0, availableTasksTotalPages - 1)}" 
                                th:classappend="${i == availableTasksCurrentPage} ? 'active'">
                                <a class="page-link" 
                                   th:href="@{/(page=${i}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                                   th:text="${i + 1}">1</a>
                            </li>
                            
                            <li class="page-item" th:classappend="${availableTasksCurrentPage == availableTasksTotalPages - 1} ? 'disabled'">
                                <a class="page-link" 
                                   th:href="@{/(page=${availableTasksCurrentPage + 1}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                                   aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div th:if="${availableTasks == null or availableTasks.empty}" class="alert alert-info">
                    暂无可申请的任务
                </div>
            </div>
        </div>
        
        <!-- 雇主功能区域 -->
        <div sec:authorize="hasRole('EMPLOYER')" class="mt-4">
            <div class="alert alert-info">
                <h4>雇主功能</h4>
                <p>作为雇主，您可以发布任务、管理项目和评价威客。</p>
                <a th:href="@{/employer/tasks}" class="btn btn-primary">任务管理</a>
                <a th:href="@{/employer/task-applications}" class="btn btn-primary">查看所有承接项目</a>
                <a th:href="@{/employer/tasks/create}" class="btn btn-success">发布新任务</a>
            </div>
        </div>
        
        <!-- 所有任务 (仅对未登录用户和管理员显示) -->
        <div sec:authorize="!hasAnyRole('FREELANCER', 'EMPLOYER')" class="mt-5">
            <div sec:authorize="hasRole('ADMIN')" class="alert alert-warning">
                <h4>管理员功能</h4>
                <p>作为管理员，您可以管理用户和任务。</p>
                <a th:href="@{/admin/users}" class="btn btn-primary">用户管理</a>
                <a th:href="@{/admin/tasks}" class="btn btn-primary">任务管理</a>
            </div>
            
            <h3>所有任务</h3>
            
            <!-- 搜索表单 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form th:action="@{/}" method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="title" class="form-label">按标题搜索</label>
                            <input type="text" class="form-control" id="title" name="title" placeholder="输入任务标题" th:value="${title}">
                        </div>
                        <div class="col-md-4">
                            <label for="taskStatus" class="form-label">按状态筛选</label>
                            <select class="form-control" id="taskStatus" name="taskStatus">
                                <option value="" th:selected="${taskStatus == null or taskStatus == ''}">全部状态</option>
                                <option value="open" th:selected="${taskStatus == 'open'}">待承接</option>
                                <option value="in_progress" th:selected="${taskStatus == 'in_progress'}">进行中</option>
                                <option value="completed" th:selected="${taskStatus == 'completed'}">已完成</option>
                                <option value="closed" th:selected="${taskStatus == 'closed'}">已关闭</option>
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">搜索</button>
                            <a th:href="@{/}" class="btn btn-secondary">重置</a>
                        </div>
                    </form>
                </div>
            </div>
            
            <div th:if="${tasks != null and !tasks.empty}">
                <div class="row">
                    <div class="col-lg-4 col-md-6 mb-4" th:each="task : ${tasks}">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title" th:text="${task.title}">任务标题</h5>
                                <p class="card-text" th:text="${#strings.abbreviate(task.description, 100)}">任务描述</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="text-muted">预算:</span>
                                        <span class="fw-bold" th:text="${'¥' + #numbers.formatDecimal(task.budget, 1, 2)}">预算</span>
                                    </div>
                                    <span th:if="${task.taskStatus == 'open'}" class="badge bg-primary">待承接</span>
                                    <span th:if="${task.taskStatus == 'in_progress'}" class="badge bg-warning">进行中</span>
                                    <span th:if="${task.taskStatus == 'completed'}" class="badge bg-success">已完成</span>
                                    <span th:if="${task.taskStatus == 'closed'}" class="badge bg-secondary">已关闭</span>
                                </div>
                                <div class="mt-2">
                                    <small class="text-muted">
                                        发布时间: <span th:text="${#temporals.format(task.publishDate, 'yyyy-MM-dd HH:mm')}">发布时间</span>
                                    </small>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a th:href="@{/tasks/{id}(id=${task.taskId})}" class="btn btn-primary btn-sm">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <nav aria-label="任务列表分页" th:if="${totalPages > 1}">
                    <ul class="pagination justify-content-center">
                        <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled'">
                            <a class="page-link" 
                               th:href="@{/(page=${currentPage - 1}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                               aria-label="上一页">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        
                        <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" 
                            th:classappend="${i == currentPage} ? 'active'">
                            <a class="page-link" 
                               th:href="@{/(page=${i}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                               th:text="${i + 1}">1</a>
                        </li>
                        
                        <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled'">
                            <a class="page-link" 
                               th:href="@{/(page=${currentPage + 1}, size=6, title=${title}, taskStatus=${taskStatus})}" 
                               aria-label="下一页">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div th:if="${tasks == null or tasks.empty}" class="alert alert-info">
                暂无任务
            </div>
        </div>
    </div>

    <div th:replace="~{fragments/footer :: footer}"></div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>